<template>
  <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="formData"
        :inline="true"
        label-width="68px"
      >

      <el-form-item label="订单编号" prop="id">
          <el-input
            v-model="formData.id"
            placeholder="订单编号"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        
        <el-form-item label="订单日期" prop="dateStr">
          <el-input
            v-model="formData.dateStr"
            placeholder="订单日期"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
          <!-- <el-date-picker
            v-model="formData.dateStr"
            value-format="YYYY-MM-DD"
            type="date"
            disabled
            start-placeholder="订单日期"
            class="!w-240px"
          /> -->
        </el-form-item>
        <el-form-item label="到货点" prop="arrivalPoint">
          <el-input
            v-model="formData.arrivalPoint"
            placeholder="到货点"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="出货方式" prop="deliveryMode">
          <el-input
            v-model="formData.deliveryMode"
            placeholder="出货方式"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="厂长" prop="manager">
          <el-input
            v-model="formData.manager"
            placeholder="厂长"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="开发业务" prop="businessName">
          <el-input
            v-model="formData.businessName"
            placeholder="开发业务"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="业务" prop="operator">
          <el-input
            v-model="formData.operator"
            placeholder="业务"
            clearable
            disabled
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
          <el-form-item label="龙亿编号" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="龙亿编号"
            clearable
            disabled
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            placeholder="备注"
            clearable
            disabled
            class="!w-240px"
          />
        </el-form-item>
      </el-form>
    </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <!-- <el-form
        class="mb-20px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
      <el-form-item label="订单编号" prop="orderCode">
          <el-input
            v-model="queryParams.orderCode"
            placeholder="请输入订单编号"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="业务" prop="operator">
          <el-input
            v-model="queryParams.operator"
            placeholder="请输入业务"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form> -->

      <el-table v-loading="detailLoading" :data="list">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="partID" align="center" prop="partId" />
        <el-table-column label="订单编号" align="center" prop="orderCode" />
        <el-table-column label="交期" align="center" prop="expiryDateStr" />
        <el-table-column label="产品名称" align="center" prop="name" />
        <el-table-column label="型号" align="center" prop="flex" />
        <el-table-column label="长度" align="center" prop="len" />
        <el-table-column label="JR/INT/SR" align="center" prop="type" />
        <el-table-column label="数量" align="center" prop="num" />
        <el-table-column label="图档名" align="center" prop="drawing" />
        <el-table-column label="面漆" align="center" prop="topcoat" />
        <el-table-column label="EAN CODE" align="center" prop="eanCode" />
        <el-table-column label="操作" align="center" width="160">
            <template #default="scope">
              <div class="flex items-center justify-center">
                <el-button
                  type="primary"
                  link
                  @click="openForm2(scope.row)"
                >修改
                </el-button>
              </div>
            </template>
          </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 修改对话框 -->
    <orderEditForm ref="formRefEdit" @success="getList"/>
  </template>
  
  <script lang="ts" setup>
  import * as orderApi from '@/api/hcxly/order/Index'
  import orderEditForm from './orderEditForm.vue'
  
  defineOptions({ name: 'orderModifyDetail' })
  
  const dialogVisible = ref(false) // 弹窗的是否展示
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const { query } = useRoute() // 查询参数
  const detailLoading = ref(false) // 表单的加载中
  const detailData = ref({} as orderApi.orderVO) // 详情数据
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  let formData = ref({}) // 列表的数据

  /** 打开弹窗 */
// const open = async (id: string) => {
//   dialogVisible.value = true
//   // 查看
//   if (id) {
//     detailLoading.value = true
//     try {
//       detailData.value = await orderApi.getOrderDetail(id)
//     } finally {
//       detailLoading.value = false
//     }
//   }
// }
// defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
  const orderId = query.id as unknown as string // 从 URL 传递过来的 id 编号
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    orderCode: ''
  })

  /** 查询订单表单详情 */
  const getdetail = async () => {
    detailLoading.value = true
    try {
      const data = await orderApi.getOrderDetailPage(orderId)
      formData.value = data
      queryParams.orderCode = data.id
      getList()
    } finally {
      detailLoading.value = false
    }
  }

  /** 查询列表 */
  const getList = async () => {
    detailLoading.value = true
    try {
      const data = await orderApi.getOrderDetail(queryParams)
      list.value = data.list
      total.value = data.total
    } finally {
      detailLoading.value = false
    }
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 修改操作 */
  const formRefEdit = ref()
  const openForm2 = (row) => {
    console.log(row)
    formRefEdit.value.open(row)
  }

   /** 初始化 **/
   onMounted(() => {
    getdetail()
  })
  </script>